<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: PingFangSC-Thin, sans-serif;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: #fff;
    }



    .box {
        width: 8rem;
        height: 8rem;
        background: #fff;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }

    .box div {
        background: paleturquoise;
        width: 0px;
        height: 0px;
        border-radius: 50%;
        ;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 3;
    }

    .son1 {




        animation: radarAnimation 4s infinite linear 0s;
    }

    .son2 {

        animation: radarAnimation 4s infinite linear 1s;
    }

    .son3 {

        animation: radarAnimation 4s infinite linear 2s;
    }

    @keyframes radarAnimation {
        0%{
            width: 0rem;
            height: 0rem;
            background: rgb(175, 238, 238, 1);
            z-index: 3;
            margin-left: -0rem ;
            margin-top: -0rem ;
          }

        10%{
            width: 0.8rem;
            height: 0.8rem;
            background: rgb(175, 238, 238, 0.9);
            z-index: 3;
            margin-left: -0.4rem ;
            margin-top: -0.4rem ;
          }

        20%{
            width: 1.6rem;
            height: 1.6rem;
            background: rgb(175, 238, 238, 0.8);
            z-index: 2;
            margin-left: -0.8rem ;
            margin-top: -0.8rem ;
          }

        30%{
            width: 2.4rem;
            height: 2.4rem;
            background: rgb(175, 238, 238, 0.7);
            z-index: 2;
            margin-left: -1.2rem ;
            margin-top: -1.2rem ;
          }

        40%{
            width: 3.2rem;
            height: 3.2rem;
            background: rgb(175, 238, 238, 0.6);
            z-index: 2;
            margin-left: -1.6rem ;
            margin-top: -1.6rem ;
          }

        50%{
            width: 4rem;
            height: 4rem;
            background: rgb(175, 238, 238, 0.5);
            z-index: 1;
            margin-left: -2rem ;
            margin-top: -2rem ;
          }

        60%{
            width: 4.8rem;
            height: 4.8rem;
            background: rgb(175, 238, 238, 0.4);
            z-index: 1;
            margin-left: -2.4rem ;
            margin-top: -2.4rem ;
          }

        70%{
            width: 5.6rem;
            height: 5.6rem;
            background: rgb(175, 238, 238, 0.3);
            z-index: 1;
            margin-left: -2.8rem ;
            margin-top: -2.8rem ;
          }

        80%{
            width: 6.4rem;
            height: 6.4rem;
            background: rgb(175, 238, 238, 0.2);
            z-index: 0;
            margin-left: -3.2rem ;
            margin-top: -3.2rem ;
          }

        90%{
            width: 7.2rem;
            height: 7.2rem;
            background: rgb(175, 238, 238, 0.1);
            z-index: 0;
            margin-left: -3.6rem ;
            margin-top: -3.6rem ;
          }

        100%{
            width: 8rem;
            height: 8rem;
            background: rgb(175, 238, 238, 0);
            z-index: 0;
            margin-left: -4rem ;
            margin-top: -4rem ;
          }
    }
    .center_bander_box{
        height: 10.57rem;
        padding-top:1px;
        position: relative;
    }
    .center_bander_box_title{
        margin-top:0.91rem;
        text-align: center;
    }
     .center_bander_box_title div:nth-child(1){
         font-size: 0.4rem;
         color: #34353F;
        
     }
      .center_bander_box_title div:nth-child(2){
         font-size: 0.26rem;
        color: #6A6B75;
         /* margin: 0.14rem 0; */
     }
    .center_bander{
        height: 8rem;
        width: 8rem;
        position: relative;
        z-index: 4;
        margin: 0 auto;

    }
    .center_bander .center_bar_box{
        width: 5.29rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -2.645rem;
        margin-top: -0.16rem;
    
        height: 0.32rem;
        z-index: 4;
    }
    .center_bander .center_bar_box .center_bar {
        height: 0.06rem;
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -0.03rem;
        background: #ccdbf0;
        z-index: 4;
    }
     .center_bander .center_bar_box .center_square_box{
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }
     .center_bander .center_bar_box .center_square_box .center_square{
         width: 0.12rem;
         height: 0.12rem;
         background: #ccdbf0;
         position: relative;
     }
     .center_bander .center_bar_box .center_square_box .center_square:nth-child(2){
         width: 0.18rem;
         height: 0.18rem;
       
     }
     .center_bander .center_bar_box .center_square_box .center_square:nth-child(3){
         width: 0.32rem;
         height: 0.32rem;
         border-radius: 50%;
     }
      .center_bander .center_bar_box .center_square_box .center_square:nth-child(4){
         width: 0.18rem;
         height: 0.18rem;
     }
     .center_bander .center_bar_box .center_square_box .center_square div{
        position: absolute;
        width: 0.64rem;
        height: 0.57rem;
        background: #ee98a6;
        left: 50%;
        margin-left: -0.32rem;
        top: -1rem;
     }
     .center_bander .center_bar_box .center_square_box .center_square:nth-child(3) div{
        position: absolute;
        width: 1.49rem;
        height: 1.74rem;
        background: #ee98a6;
        margin-left: -0.745rem;
        top:-2rem;
        
     }
     .center_bander .center_bar_box .center_square_box .center_square:nth-child(3) div:nth-child(2){
        position: absolute;
        width: 2.63rem;
        height: 1.18rem;
        background: #ee98a6;
        margin-left: -1.315rem;
        top: 0.8rem;
        
     }
      .center_bander .center_bar_box .center_square_box .center_square div img{
          width: 100%;
          height: 100%;
          display: block;
      }
      .center_dev_box{
          width: 6.8rem;
          height: 3.33rem;
        
         
          position: absolute;
          top: 4.24rem;
          z-index: 5;
          left: 50%;
          margin-left: -3.4rem;
          font-size: 0.24rem;

      }
      .center_dev_box .center_dev {
          position: absolute;
          width: 3.30rem;
      }
       .center_dev_box .center_dev >div{
           color: #6A6B75;
           font-size: 0.26rem;
       }
       .center_dev_box .center_dev >div:nth-child(1){
          color: #34353F;
           font-size: 0.28rem;
           margin-bottom: 0.01rem;
       }
       
      .center_dev_box .center_dev:nth-child(1){
        bottom: 3.33rem;
        right: 6.8rem;
        text-align: right;
      }
      .center_dev_box .center_dev:nth-child(2){
        bottom: 3.33rem;
        left: 6.8rem;
    
      }
      .center_dev_box .center_dev:nth-child(3){
        top: 3.33rem;
        right: 6.8rem;
        text-align: right;
    
      }
      .center_dev_box .center_dev:nth-child(4){
        top: 3.33rem;
        left: 6.8rem;
      }
       .center_dev_box .center_dev>.center_dev_icon_1or3{
           position: absolute;
           width: 0.45rem;
           height: 0.45rem;
           background: pink;
            right: -0.54rem;
           top:0;
       }
       .center_dev_box .center_dev>.center_dev_icon_2or4{
           position: absolute;
           width: 0.45rem;
           height: 0.45rem;
           background: pink;
            left: -0.54rem;
           top:0;
       }
         .center_dev_box .center_dev>.active{
             color: #16A2F9 !important;
         }
         .product_box{
             height: 7.37rem;
             background:rgba(249,249,249,1);
         }
         .product_box > div {
             width: 12rem;
             height: 100%;
             margin: 0 auto;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .product_box>div>div{
             
            width:3.80rem;
            height:4.79rem;
            background:linear-gradient(180deg,rgba(2,147,247,1) 0%,rgba(99,223,255,1) 100%);
            border-radius:0.16rem;
            padding-left: 0.38rem;
            padding-top: 0.36rem;
            box-sizing:border-box;
         }
         .product_box>div>div .product_tit{
          
            font-size:0.3rem;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin-bottom:0.16rem;
         }
         .product_box>div>div .product_dec{
             margin-bottom:0.16rem;
        
            font-size:0.17rem;
            font-family:PingFang-SC-Heavy,PingFang-SC;
            font-weight:800;
            color:rgba(255,255,255,1);
        
            letter-spacing:4px;
         }
         .solution {
             height: 6.59rem;
               background: #3d6aa8;
         }
        .solution>div{
            width: 12rem;
            height: 100%;
            margin: 0 auto;
            padding-top:1px;
          
        }
         .solution>div .solution_title{
             margin-top: 0.64rem;
            font-size:0.41rem;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
        
         }
         .solution>div .solution_dev{
            text-align: center;
            font-size: 0.26rem;
            font-family:PingFang-SC-Medium,PingFang-SC;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin-top: 0.1rem
        
         }
         
        .solution>div .solution_select_box{
            height: 3.35rem;
            margin-top: 0.64rem;
            width: 100%;
            background: #fff;
            display: flex;
          

        }
        .solution>div .solution_select_box> div{
            width: 4rem;
            display: flex;
            align-items: center;
            height: 100%;
            
        }
        .solution>div .solution_select_box> div > div{
            width: 4rem;
            height: 1.98rem;
            border-left: 1px solid #ccc;
            
        }
         .solution>div .solution_select_box>div .solution_select_dev {
            font-size:0.3rem;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(52,53,63,1);
            width: 100%;
            text-align: center;
             margin: 0.22rem auto;
         }
         .solution>div .solution_select_box>div .solution_select_icon {
             width:1.47rem;
             height:1.34rem;
             background: #ee98a6;
             margin: 0 auto;
             position: relative;
         }
         
         .guys_box{
             height: 4.54rem;
         }
         .guys_box .guys {
             width: 12rem;
             margin: 0 auto;
         }
         .guys_box .guys .guys_title {
            margin: 0.71rem auto;
            text-align: center;
            font-size:0.41rem;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(52,53,63,1);
           
         }
          .guys_box .guys .guys_logo_box {
              display: flex;
              flex-wrap: wrap;
              width: 100%;
          }
          .guys_box .guys .guys_logo_box .guys_logo {
              height: 1.04rem;
              width: 3rem;
              background: rebeccapurple;
          }
          .guys_box .guys .guys_logo_box .guys_logo img{
              display: block;
          }
          .end_box {
              height: 3.07rem;
              background: #224191;
              position: relative;
          }
          .end_box > div {
            width: 12rem;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
          }
           .end_box > div .end_content_box{
                font-size:0.14rem;
                font-family:PingFang-SC-Medium,PingFang-SC;
                font-weight:500;
                color:rgba(255,255,255,1);
               
               
           }
           .end_box > div .end_content_box .end_content_title{
                 margin-top: 0.57rem;
                 margin-bottom: 0.235rem;
           }
           .end_box > div .end_content_box .end_content_dev{
                font-size:0.12rem;
                font-family:PingFang-SC-Medium,PingFang-SC;
                font-weight:500;
                color:rgba(255,255,255,1);
               
           }
          .end_box > div .end_content_box .RC {
              margin-top: 0.15rem;
              width: 0.69rem;
              height: 0.69rem;
              background: #ee98a6;
          }
          .end_box .last {
              position: absolute;
              width: 100%;
              text-align: center;
              top: 2.5rem;
              font-size:0.14rem;
              font-family:PingFang-SC-Medium,PingFang-SC;
              font-weight:500;
              color:rgba(255,255,255,1);
              height: auto;
          }
           
</style>

<body>
   
  <div class="center_bander_box">
    <div class="center_bander_box_title">
        <div >数信淘客</div>
        <div>智能财务欺诈和风险分析产品</div>
    </div>
    <div class="center_bander">
        <div class="box">
            <div class="son1"></div>
            <div class="son2"></div>
            <div class="son3"></div>
        </div>
        <div class="center_bar_box">
            <div class="center_bar">
            </div>
            <div class="center_square_box">
                <div class="center_square">
                    <div></div>
                </div>
                <div class="center_square">
                    <div></div>
                </div>
                <div class="center_square">
                    <div></div>
                    <div></div>
                </div>
                <div class="center_square">
                    <div></div>
                </div>
                <div class="center_square">
                    <div></div>
                </div>
            </div>
        </div>
        
    </div>
    <div class="center_dev_box">
        <div class="center_dev">
            <div class="active">标准财务分析</div>
            <div>上百种指标</div>
            <div>行业参考值</div>
            <div>财务风险等级评分</div>
            <div class="center_dev_icon_1or3 active"></div>
        </div>
        <div class="center_dev">
            <div>财务数据反粉饰</div>
            <div>内部勾稽</div>
            <div>横向纵向比较</div>
            <div>动态专家审计规则</div>
            <div class="center_dev_icon_2or4"></div>
        </div>
        <div class="center_dev">
            <div>多维数据交叉验证</div>
            <div>企业非财务运营数据</div>
            <div>企业外部数据源</div>
            <div class="center_dev_icon_1or3"></div>
        </div>
        <div class="center_dev">
            <div>机器学习预测欺诈和风险</div>
            <div>自然语言处理</div>
            <div>财务欺诈图</div>
            <div class="center_dev_icon_2or4"></div>
        </div>
    </div>
  </div>

  <div class="product_box">
    <div>
        <div>
            <div class="product_tit">立即试用云产品</div>
            <div class="product_dec">TRY CLOUD</div>
            <div class="product_dec">PRODUCTS</div>
            <div class="product_dec">IMMEDIATELY</div>
        </div>
        <div>
            <div class="product_tit">API接入</div>
            <div class="product_dec">API Access</div>
        </div>
        <div>
            <div class="product_tit">本地部署方案</div>
            <div class="product_dec">LOCAL</div>
            <div class="product_dec">DEPLOYMENT</div>
            <div class="product_dec">OPTIONS</div>
        </div>
        
    </div>
  </div>
  <div class="solution">
      <div>
         <div class="solution_title">解决方案</div>
         <div class="solution_dev">智能财务欺诈和风险分析产品</div>

         <div class="solution_select_box">
             <div>
                <div>
                    <div class="solution_select_icon"></div>
                    <div class="solution_select_dev">财报风控</div>
                </div>
             </div>
            <div>
                <div>
                    <div class="solution_select_icon"></div>
                    <div class="solution_select_dev">智能审计</div>
                </div>
            </div>
            <div>
                <div>
                    <div class="solution_select_icon"></div>
                    <div class="solution_select_dev">财务中台</div>
                </div>
            </div>
         </div>
      </div>
  </div>

  <div class="guys_box">
      <div class="guys">
          <div class="guys_title">合作伙伴</div>
          <div class="guys_logo_box">
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              <div class="guys_logo"></div>
              
          </div>
      </div>
  </div>
  <div class="end_box">
      <div>
            <div class="end_content_box">
                <div class="end_content_title">
                    产品服务
                </div>
            </div>
            <div class="end_content_box">
                <div class="end_content_title">
                    商务合作
                </div>
                <div class="end_content_dev">
                    123456789(微信) 王小姐
                </div>
                <div class="end_content_dev">
                    Email: bd@surexing.com
                </div>
            </div>
            <div class="end_content_box">
                <div class="end_content_title">
                    联系我们
                </div>
                <div class="end_content_dev">
                  人才招聘: hr@surexing.com
                </div>
                <div class="end_content_dev">
                    媒体合作: media@surexing.com
                </div>
                <div class="end_content_dev">
                    公司地址: 上海市张江Vπ空间2楼A区
                </div>
            </div>
            <div class="end_content_box">
                <div class="end_content_title">
                    微信公众号
                </div>
                <div class="RC">
                  
                </div>
                
            </div>
      </div>
      <div class="last">
        © 2015-现在 数行科技（上海）有限公司 版权所有沪ICP备16001598号
      </div>
  </div>
</body>
<script src="test.js"></script>
</html>